<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工伤鉴定书分析API测试页面</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        .upload-area {
            border: 2px dashed #ddd;
            border-radius: 10px;
            padding: 40px;
            text-align: center;
            margin-bottom: 20px;
            transition: border-color 0.3s;
        }
        .upload-area:hover {
            border-color: #007bff;
        }
        .upload-area.dragover {
            border-color: #007bff;
            background-color: #f8f9fa;
        }
        input[type="file"] {
            display: none;
        }
        .upload-btn {
            background: #007bff;
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            margin: 10px;
        }
        .upload-btn:hover {
            background: #0056b3;
        }
        .analyze-btn {
            background: #28a745;
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            width: 100%;
            margin-top: 20px;
        }
        .analyze-btn:hover {
            background: #218838;
        }
        .analyze-btn:disabled {
            background: #6c757d;
            cursor: not-allowed;
        }
        .result-area {
            margin-top: 30px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 5px;
            display: none;
        }
        .result-item {
            margin-bottom: 15px;
            padding: 10px;
            background: white;
            border-radius: 5px;
            border-left: 4px solid #007bff;
        }
        .result-label {
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
        }
        .result-value {
            color: #666;
            line-height: 1.5;
        }
        .loading {
            text-align: center;
            padding: 20px;
            color: #666;
        }
        .error {
            color: #dc3545;
            background: #f8d7da;
            border: 1px solid #f5c6cb;
            padding: 15px;
            border-radius: 5px;
            margin-top: 20px;
        }
        .success {
            color: #155724;
            background: #d4edda;
            border: 1px solid #c3e6cb;
            padding: 15px;
            border-radius: 5px;
            margin-top: 20px;
        }
        .file-info {
            margin-top: 15px;
            padding: 10px;
            background: #e9ecef;
            border-radius: 5px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>工伤鉴定书分析API测试</h1>
        
        <div class="upload-area" id="uploadArea">
            <p>拖拽文件到此处或点击选择文件</p>
            <p style="font-size: 14px; color: #666;">支持格式：PDF、DOCX、PNG、JPG、JPEG、BMP、TIFF、WEBP</p>
            <button class="upload-btn" onclick="document.getElementById('fileInput').click()">选择文件</button>
            <input type="file" id="fileInput" accept=".pdf,.docx,.png,.jpg,.jpeg,.bmp,.tiff,.webp">
        </div>
        
        <div class="file-info" id="fileInfo" style="display: none;"></div>
        
        <button class="analyze-btn" id="analyzeBtn" onclick="analyzeFile()" disabled>开始分析</button>
        
        <div class="result-area" id="resultArea">
            <h3>分析结果</h3>
            <div id="resultContent"></div>
        </div>
    </div>

    <script>
        let selectedFile = null;
        const API_BASE_URL = 'http://localhost:8080';

        // 文件选择处理
        document.getElementById('fileInput').addEventListener('change', function(e) {
            handleFileSelect(e.target.files[0]);
        });

        // 拖拽处理
        const uploadArea = document.getElementById('uploadArea');
        
        uploadArea.addEventListener('dragover', function(e) {
            e.preventDefault();
            uploadArea.classList.add('dragover');
        });
        
        uploadArea.addEventListener('dragleave', function(e) {
            e.preventDefault();
            uploadArea.classList.remove('dragover');
        });
        
        uploadArea.addEventListener('drop', function(e) {
            e.preventDefault();
            uploadArea.classList.remove('dragover');
            handleFileSelect(e.dataTransfer.files[0]);
        });

        function handleFileSelect(file) {
            if (!file) return;
            
            selectedFile = file;
            const fileInfo = document.getElementById('fileInfo');
            const analyzeBtn = document.getElementById('analyzeBtn');
            
            fileInfo.innerHTML = `
                <strong>已选择文件：</strong>${file.name}<br>
                <strong>文件大小：</strong>${(file.size / 1024 / 1024).toFixed(2)} MB<br>
                <strong>文件类型：</strong>${file.type || '未知'}
            `;
            fileInfo.style.display = 'block';
            analyzeBtn.disabled = false;
        }

        async function analyzeFile() {
            if (!selectedFile) {
                alert('请先选择文件');
                return;
            }

            const analyzeBtn = document.getElementById('analyzeBtn');
            const resultArea = document.getElementById('resultArea');
            const resultContent = document.getElementById('resultContent');
            
            // 显示加载状态
            analyzeBtn.disabled = true;
            analyzeBtn.textContent = '分析中...';
            resultArea.style.display = 'block';
            resultContent.innerHTML = '<div class="loading">正在分析文件，请稍候...</div>';

            try {
                const formData = new FormData();
                formData.append('attendance_file', selectedFile);

                const response = await fetch(`${API_BASE_URL}/analyze_injury_assessment`, {
                    method: 'POST',
                    body: formData
                });

                if (response.ok) {
                    const result = await response.json();
                    displayResult(result);
                } else {
                    const error = await response.json();
                    displayError(`分析失败：${error.detail || '未知错误'}`);
                }
            } catch (error) {
                displayError(`网络错误：${error.message}`);
            } finally {
                analyzeBtn.disabled = false;
                analyzeBtn.textContent = '开始分析';
            }
        }

        function displayResult(result) {
            const resultContent = document.getElementById('resultContent');
            
            const resultItems = [
                { label: '文件类型', value: result['文件类型'] },
                { label: '鉴定机构', value: result['鉴定机构'] || '未识别' },
                { label: '鉴定日期', value: result['鉴定日期'] || '未识别' },
                { label: '是否可以作为证据', value: result['是否可以作为证据'] },
                { label: '文件有效性说明', value: result['文件有效性说明'] },
                { label: '文件内容摘要', value: result['文件内容'].substring(0, 500) + (result['文件内容'].length > 500 ? '...' : '') }
            ];

            let html = '<div class="success">分析完成！</div>';
            
            resultItems.forEach(item => {
                html += `
                    <div class="result-item">
                        <div class="result-label">${item.label}：</div>
                        <div class="result-value">${item.value}</div>
                    </div>
                `;
            });

            resultContent.innerHTML = html;
        }

        function displayError(message) {
            const resultContent = document.getElementById('resultContent');
            resultContent.innerHTML = `<div class="error">${message}</div>`;
        }

        // 页面加载时检查API服务状态
        window.addEventListener('load', async function() {
            try {
                const response = await fetch(`${API_BASE_URL}/health`);
                if (response.ok) {
                    console.log('API服务正常');
                } else {
                    console.warn('API服务可能未启动');
                }
            } catch (error) {
                console.warn('无法连接到API服务，请确保服务已启动');
            }
        });
    </script>
</body>
</html>